<template>
  <div>
    <el-dialog title="菜单项配置" :visible.sync="dialogVisible"  width="790">
        <div class="menuitem">
            <div class="menuitem treebox">
              <el-tree
                :data="menulist" 
                :highlight-current="true"
                node-key="id"
                :props="props"
                ref="tree"
                @node-click="handleNodeClick"
              >
              </el-tree>
            </div>
            <div class="rightbox">
              <div class="checkbox">
                <el-tabs v-model="radio1" >
                  <el-tab-pane v-for="item in radiolist" :key="item.id" :label="item.name" :name="item.id">
                      <el-checkbox-group v-model="checkList" >
                        <el-checkbox v-for="items in item.functions" :key="items.id" :label="items.id" :value="items.id">{{items.name}}</el-checkbox>
                      </el-checkbox-group>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
        </div>
        <span slot="footer">
          <el-button size="small" type="primary" @click="sure">确 定</el-button>
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import {getalltreeapi,postfunctionitem} from '@/api/system/menu-manage'
export default {
  name: 'CallPoliceMenuItem',
  props:{
    treevalue:{
      type:Object,
      default:()=>{}
    },
    tablerow: {
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      menulist:[],
      dialogVisible:false,
      props:{
        label:'name'
      },
      radio1:'',
      radiolist:[],
      checkList:[],
      forlist:[]
    };
  },

  async mounted() {
    const {data:{entity:{modules}}}=await getalltreeapi()
    this.menulist=modules
    this.handleNodeClick(modules[0])
    
  },

  methods: {
    sure(){
      const parentId = this.treevalue.itemId ? this.treevalue.itemId : this.tablerow.menuId
      const functionId=this.checkList.join(',')
      postfunctionitem({parentId,functionId}).then(res=>{
        this.checkList=[]
        this.dialogVisible=false
        this.$emit('additem',res,'新增',true)
      })
    },
    handleNodeClick(val){
       this.radiolist=val.packages
      this.radio1 = val.packages[0].id
    },
  },
  watch: {
    dialogVisible(val) {
      setTimeout(()=>this.$refs.tree.setCurrentKey(this.menulist[0].id),100)
    }
  }
};
</script>
<style scoped>
.menuitem{
  display:flex;
  height:500px;
  overflow-y:auto;
  .rightbox{
    width:600px;
    .checkbox{
      height:500px;
      overflow-y:auto;
      padding-left:20px;
      .checks{
        margin-top:20px;
      }
    }
  }
}
.treebox{
  width:210px;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-checkbox-group {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}
::v-deep .el-checkbox {
  width: 33.33%;
  margin: 10px 0;
}
</style>